<template>
  <basic-container>
    <div class="show-wrapper">
      <!-- <el-button-group class="button-group">
        <el-button type="primary" size="small" @click="addDepartment">添加</el-button>
        <el-button type="primary" size="small" @click="handlerEdit">编辑</el-button>
        <el-button type="primary" size="small" @click="deleteDepartment">删除</el-button>
      </el-button-group> -->
      <div class="wrapper">
        <el-tree
          :default-expand-all="false"
          :expand-on-click-node="false"
          @node-click="selectNode"
          :props="treeProps"
          :data="treeData"
          class="tree"
          size="small"
        ></el-tree>
        <el-form
          size="small"
          :model="optionForm"
          :rules="rules"
          ref="optionForm"
          label-width="100px"
          class="form"
        >
          <el-form-item label="父级节点" prop="parentId">
            <el-input
              :disabled="true"
              v-model="optionForm.parentId"
              placeholder="请选择父级节点"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="!edit" label="节点编号" prop="id">
            <el-input
              :disabled="!edit"
              v-model="optionForm.id"
              placeholder="节点编号"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门名称" prop="name">
            <el-input
              :disabled="!edit"
              v-model="optionForm.name"
              placeholder="请输入名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input
              :disabled="!edit"
              v-model="optionForm.sort"
              placeholder="请输入排序"
            ></el-input>
          </el-form-item>
          <el-form-item v-if="edit">
            <el-button type="primary" @click="submitForm('ruleForm')">{{
              optionTitle
            }}</el-button>
            <el-button @click="cancelSave">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </basic-container>
</template>
<script>
import { addDepartment, getDepartment, updateDepartment, deleteDepartment } from '@/api/permission/department'
export default {
  name: '',
  data() {
    return {
      edit: false,
      treeProps: {
        children: 'childList',
        label: 'name'
      },
      optionTitle: '',
      optionForm: {
        parentId: '0',
        name: '',
        sort: '0',
        id: ''
      },
      treeData: [],
      rules: {
        parentId: [{ required: true, message: '请选择父级节点', trigger: 'blur' }],
        name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        id: [{ required: true, message: '请输入节点编号', trigger: 'blur' }],
      }
    }
  }, created() {
    this.searchHandler()
  }, methods: {
    cancelSave() {
      // 取消保存
      this.optionTitle = ''
      this.edit = false
    },
    handlerEdit() {
      if (this.optionTitle === '保存') {
        return
      }
      this.edit = true
      this.optionTitle = '更新'
    },
    addDepartment() {
      this.optionTitle = '保存'
      this.edit = true
      this.optionForm.name = ''
      this.optionForm.sort = '0'
      this.optionForm.parentId = this.optionForm.id || '0'
    },
    deleteDepartment() {
      deleteDepartment([this.optionForm.id]).then(() => {
        this.$message.success('删除成功')
        this.searchHandler()
      })
    },
    selectNode(node) {
      this.optionForm = JSON.parse(JSON.stringify(node))
    },
    searchHandler() {
      getDepartment().then(res => {
        this.treeData = res.data
        this.$forceUpdate()
      })
    },
    submitForm() {
      this.$refs['optionForm'].validate((valid) => {
        if (valid) {
          if (this.optionTitle === '保存') {
            addDepartment(this.optionForm).then(() => {
              this.$message.success('保存成功')
              this.searchHandler()
            })
          }
          if (this.optionTitle === '更新') {
            updateDepartment(this.optionForm).then(() => {
              this.$message.success('更新成功')
              this.searchHandler()
            })
          }
        } else {
          return false
        }
      })
    },
    cancel() {

    }
  }
}
</script>

<style lang="less" scoped>
.show-wrapper {
  .button-group {
    margin-bottom: 20px;
  }
  .wrapper {
    display: flex;
    .tree {
      width: 500px;
    }
    .form {
      width: 100%;
    }
  }
}
</style>
